import mesop as me

@me.stateclass
class State:
    open_section: str

def toggle_section(e: me.ClickEvent):
    state = me.state(State)
    if state.open_section == e.key:
        state.open_section = ""
    else:
        state.open_section = e.key

def accordion_section(title: str, content: str):
    state = me.state(State)
    is_open = state.open_section == title

    with me.box(style=me.Style(
        border=me.Border.all(me.BorderSide(width=1, color=me.theme_var("primary"))),
        border_radius=8,
        margin=me.Margin(bottom=16),
        box_shadow="0 2px 4px rgba(0,0,0,0.1)"
    )):
        with me.box(
            key=title,
            on_click=toggle_section,
            style=me.Style(
                display="flex",
                justify_content="space-between",
                align_items="center",
                padding=me.Padding.all(16),
                background=me.theme_var("surface"),
                cursor="pointer",
                border_radius="8px 8px 0 0",
        )):
            me.text(title, type="subtitle-1", style=me.Style(
                color=me.theme_var("on-surface"),
                font_weight="bold"
            ))
            me.icon(
                "expand_more" if is_open else "chevron_right",
                style=me.Style(
                    color=me.theme_var("primary"),
                    transform=f"rotate({90 if is_open else 0}deg)"
                )
            )

        if is_open:
            with me.box(style=me.Style(
                padding=me.Padding.all(16),
                background=me.theme_var("surface-variant"),
                border_radius="0 0 8px 8px"
            )):
                me.text(content, style=me.Style(
                    color=me.theme_var("on-surface-variant"),
                ))

@me.page()
def page():
    with me.box(style=me.Style(
        max_width=800,
        margin=me.Margin.symmetric(horizontal="auto"),
        padding=me.Padding.all(24),
        background=me.theme_var("background"),
        min_height="100vh"
    )):
        me.text("Elegant Accordion Example", type="headline-4", style=me.Style(
            color=me.theme_var("primary"),
            margin=me.Margin(bottom=24),
            text_align="center",
            font_weight="bold"
        ))

        accordion_section("Getting Started", "Welcome to our application! This section provides an overview of the key features and how to get started quickly.")
        accordion_section("Advanced Features", "Discover the advanced capabilities of our platform, including customization options, integrations, and power user tools.")
        accordion_section("Frequently Asked Questions", "Find answers to common questions about account management, billing, and technical support.")